<template>
	<div id="app">
		<!-- 路由视图 -->
		<router-view />

		<!-- 底部导航栏 - 只在主要页面显示 -->
		<van-tabbar v-if="showTabbar" v-model="activeTab" @change="onTabChange">
			<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
			<van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
	name: 'App',
	setup() {
		const route = useRoute()
		const activeTab = ref(0)

		// 需要显示底部导航的页面
		const tabbarPages = ['/', '/user']

		// 是否显示底部导航栏
		const showTabbar = computed(() => {
			return tabbarPages.includes(route.path)
		})

		// 根据当前路由更新选中的tab
		watch(
			() => route.path,
			(newPath) => {
				const index = tabbarPages.indexOf(newPath)
				if (index !== -1) {
					activeTab.value = index
				}
			},
			{ immediate: true }
		)

		const onTabChange = (index) => {
			activeTab.value = index
		}

		return {
			route,
			activeTab,
			showTabbar,
			onTabChange,
		}
	},
}
</script>

<style lang="less">
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 16px;
	background-color: #f8f8f8;
	-webkit-font-smoothing: antialiased;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

#app {
	min-height: 100vh;
}

// 全局样式
.van-tabbar {
	z-index: 1000;
}

.van-nav-bar {
	z-index: 999;
}

// 应用加载状态
.app-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9998; // 低于登录状态弹窗
}

.loading-content {
	text-align: center;
}

.loading-content p {
	margin-top: 12px;
	font-size: 14px;
	color: #666;
}
</style>
